<template>
  <div>
      <el-form  status-icon   label-width="100px" class="demo-ruleForm">
        <el-form-item label="SPU名称" >
            <template slot-scope="">
                {{spuName}}
            </template>
        </el-form-item>
        <el-form-item label="SKU名称">
            <el-input  autocomplete="off" placeholder="sku名称" v-model="Sku.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格（元）">
            <el-input  autocomplete="off" placeholder="价格（元）" v-model.number="Sku.price" type="number"></el-input>
        </el-form-item>
        <el-form-item label="重量（千克）">
            <el-input  autocomplete="off" placeholder="重量（千克）" v-model.number="Sku.weight"></el-input>
        </el-form-item>
        <el-form-item label="规则描述">
            <el-input type="textarea" :rows="4" placeholder="规则描述" v-model="Sku.skuDesc"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form :inline="true"  label-width="80px">
                <el-form-item :label="list.attrName" v-for="list in InfoList" :key="list.id" style="margin-bottom:10px">
                        <el-select  placeholder="请选择" v-model='list.setValue'>
                            <el-option :label="ValueList.valueName" :value="`${list.id}:${ValueList.id}`" v-for="ValueList in list.attrValueList" :key="ValueList.id"></el-option>
                        </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form :inline="true"  label-width="80px">
                <el-form-item :label="List.saleAttrName" v-for="List in SaleAttrList" :key="List.id">
                    <el-select  placeholder="请选择" v-model='List.setValue'>
                        <el-option :label="listvalue.saleAttrValueName" :value="`${List.id}:${listvalue.id}`" v-for="listvalue in List.spuSaleAttrValueList" :key="listvalue.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片列表">
            <template slot-scope="{row,$index}">
               <el-table tooltip-effect="dark" style="width: 100%;margin-bottom:20px" border :data="ImageList" @selection-change="handleSelectionChange" >
                    <el-table-column type="selection" width="55" align="center" ></el-table-column>
                    <el-table-column label="图片" width="width" align="center">
                        <template slot-scope="{row,$index}">
                            <el-image
                            style="width: 100px; height: 100px"
                            :src="row.imgUrl"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" width="width" prop="imgName" align="center"></el-table-column>
                     <el-table-column label="操作" width="150" align="center">
                         <template slot-scope="{row,$index}">
                            <el-button type="primary" size="small" @click="Acquiesce(row,$index)" v-show="row.isDefault==0">设置为默认</el-button>
                            <el-tag type="success" effect="dark" size="small" v-show="row.isDefault==1" :disable-transitions='true'>默认</el-tag>
                         </template>
                     </el-table-column>
               </el-table>
               <el-button type="primary" @click="preserve">保存</el-button>
               <el-button type="primary" @click="Cancel">取消</el-button>
            </template>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
    name:'SkuForm',
    data() {
        return {
            ImageList:[],  //获取的图片列表
            SaleAttrList:[], //获取的销售属性列表
            InfoList:[],    //获取的平台属性列表
            spuName:'', //sku名称
            Images:[],//获取客户点击了的多选框列表
              Sku: {
                category3Id: 0,
                spuId: 0,
                tmId: 0,
                skuName: "",  //sku名称
                price: '',  //价格
                weight: undefined,  //重量
                skuDesc: "", //描述                
                // 默认图片
                skuDefaultImg: "",
                //平台属性
                skuAttrValueList: [
                ],
                // 收集的图片
                skuImageList: [
                ],
                // 销售属性
                skuSaleAttrValueList: [
                ],
            }
        }
    },
    methods:{
       async getSku(row,ids){ 
            // 获取sku图片数据
         let result =   await this.$API.spu.spuImageList(row.id)
            if (result.code==200) {
                this.ImageList = result.data
                  this.ImageList.forEach((item)=>{
                    this.$set(item,'isDefault',0)
                })
            }
         // 获取销售属性
         let result2 = await this.$API.spu.spuSaleAttrList(row.id)
            if (result2.code==200) {
                this.SaleAttrList = result2.data
            }
         let result3 = await this.$API.spu.attrInfoList(ids)
            if (result3.code==200) {
                this.InfoList = result3.data
            }
            this.spuName = row.spuName
            this.Sku.category3Id = ids.category3Id
            this.Sku.spuId = row.id
            this.Sku.tmId = row.tmId
        },
        // 取消按钮方法
        Cancel(){
            this.$emit('getCancel',{num:0})
            Object.assign(this._data,this.$options.data())
        },
        // 设置默认方法点击设置默认
        Acquiesce(row){
            this.ImageList.forEach((item)=>{
                this.$set(item,'isDefault',0)
            })
            row.isDefault = 1
            this.Sku.skuDefaultImg = row.imgUrl
        },
        // table多选框方法 获取点击多选框
        handleSelectionChange(selection){
            this.Images = selection;
        },
        // 保存
       async preserve(){
            // 平台属性整理收集
          this.InfoList.forEach((item)=>{
                if (item.setValue) {
                     let array = item.setValue.split(':')
                     let obj = {
                         attrId:array[0],
                         valueId:array[1]
                     }
                     this.Sku.skuAttrValueList.push(obj)
                }
            })
            //销售属性整理收集
          let array =   this.SaleAttrList.reduce((arrays,item)=>{
                if (item.setValue) {
                   let array =  item.setValue.split(':')
                   arrays.push({
                       saleAttrId:array[0],
                       saleAttrValueId:array[1]
                   })
                }
                return arrays
            },[])
           this.Sku.skuSaleAttrValueList = array
            //图片列表整理收集
           this.Sku.skuImageList = this.Images.map((item)=>{ 
                return {
                    imgName:item.imgName,
                    imgUrl:item.imgUrl,
                    isDefault:item.isDefault,
                    spuImgId:item.spuId
                }
            })
        //    发送保存请求
           let result =  await this.$API.spu.AddsaveSkuInto(this.Sku)
           if (result.code==200) {
               this.$emit('getCancel',{num:0})
            //    清空数据
               Object.assign(this._data,this.$options.data())
               this.$message({
                    message: '恭喜你，添加成功',
                    type: 'success'
                });
                
           }
        }
    }
}
</script>

<style>

</style>